<template>
  <div class="support">
  <div class="bg-dark text-white font-sans">
    <!-- 进度条 -->
    <div class="fixed top-0 left-0 w-full z-50 pointer-events-none">
      <div class="progress-line" id="progress-line"></div>
    </div>

    <!-- 支持Hero区域 -->
    <section class="relative pt-24 pb-16 bg-darker">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h1 class="text-4xl md:text-5xl font-bold mb-4">技术支持</h1>
          <p class="text-gray-400 max-w-2xl mx-auto">
            我们提供全方位的技术支持，帮助您快速解决使用过程中遇到的问题
          </p>
        </div>

        <!-- 搜索框 -->
        <div class="max-w-2xl mx-auto mb-16">
          <div class="relative">
            <input
              type="text"
              placeholder="搜索技术支持文档..."
              id="support-search"
              class="w-full px-6 py-4 bg-card border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
            >
            <button class="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary">
              <i class="fa fa-search"></i>
            </button>
          </div>
        </div>

        <!-- 支持类别 -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
          <a href="#faq" class="bg-card rounded-xl p-6 text-center hover-lift">
            <div class="text-primary text-3xl mb-3">
              <i class="fa fa-question-circle"></i>
            </div>
            <h3 class="font-semibold">常见问题</h3>
            <p class="text-gray-400 text-sm mt-2">查看最常见的问题解答</p>
          </a>

          <a href="#guides" class="bg-card rounded-xl p-6 text-center hover-lift">
            <div class="text-primary text-3xl mb-3">
              <i class="fa fa-book"></i>
            </div>
            <h3 class="font-semibold">使用指南</h3>
            <p class="text-gray-400 text-sm mt-2">详细的功能使用说明</p>
          </a>

          <a href="#submit-ticket" class="bg-card rounded-xl p-6 text-center hover-lift">
            <div class="text-primary text-3xl mb-3">
              <i class="fa fa-ticket"></i>
            </div>
            <h3 class="font-semibold">提交工单</h3>
            <p class="text-gray-400 text-sm mt-2">创建技术支持请求</p>
          </a>

          <a href="#contact" class="bg-card rounded-xl p-6 text-center hover-lift">
            <div class="text-primary text-3xl mb-3">
              <i class="fa fa-phone"></i>
            </div>
            <h3 class="font-semibold">联系我们</h3>
            <p class="text-gray-400 text-sm mt-2">获取直接支持</p>
          </a>
        </div>
      </div>
    </section>

    <!-- 常见问题区域 -->
    <section id="faq" class="py-20 bg-dark">
      <div class="container mx-auto px-4">
        <div class="text-center mb-16">
          <h2 class="text-3xl md:text-4xl font-bold mb-4">常见<span class="text-primary">问题</span></h2>
          <p class="text-gray-400 max-w-2xl mx-auto">
            查看用户最常问的问题和解决方案，快速找到您需要的答案
          </p>
        </div>

        <!-- FAQ选项卡 -->
        <div class="flex flex-wrap justify-center gap-6 mb-12">
          <button
            v-for="tab in faqTabs"
            :key="tab.id"
            :class="{ 'support-tab active': activeTab === tab.id, 'support-tab': activeTab !== tab.id }"
            :data-tab="tab.id"
            @click="changeTab(tab.id)"
          >
            {{ tab.label }}
          </button>
        </div>

        <!-- FAQ内容 -->
        <div class="max-w-4xl mx-auto">
          <div
            v-for="tab in faqTabs"
            :key="tab.id"
            :class="{ 'faq-content active': activeTab === tab.id, 'faq-content hidden': activeTab !== tab.id }"
            :id="`${tab.id}-faq`"
          >
            <div
              v-for="(faq, index) in tab.faqs"
              :key="index"
              class="bg-card rounded-xl mb-4 overflow-hidden"
            >
              <button
                class="faq-question w-full px-6 py-5 text-left flex justify-between items-center focus:outline-none"
                @click="toggleFaqAnswer(index)"
              >
                <span class="font-semibold text-lg">{{ faq.question }}</span>
                <i
                  class="faq-toggle text-primary transition-transform duration-300"
                  :class="{ 'rotate-180': faq.isOpen }"
                >
                  <i class="fa fa-chevron-down"></i>
                </i>
              </button>
              <div
                :class="{ 'faq-answer px-6 pb-5 active': faq.isOpen, 'faq-answer px-6 pb-5': !faq.isOpen }"
              >
                <p class="text-gray-400" v-html="faq.answer"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  </div>
</template>

<script>
// 原文件第10 - 25行的 Tailwind 配置
const tailwindConfig = {
  theme: {
    extend: {
      colors: {
        primary: '#48b6ff',
        secondary: '#2e6cf1',
        dark: '#080812',
        darker: '#04040a',
        card: '#1a1a31'
      },
      fontFamily: {
        sans: ['Segoe UI', 'sans-serif'],
      },
    }
  }
};

// 初始化 Tailwind 配置
if (typeof window !== 'undefined' && window.tailwind) {
  window.tailwind.config = tailwindConfig;
}
export default {
  name: 'SupportView',
  data() {
    return {
      isMobileMenuOpen: false,
      activeTab: 'general',
      faqTabs: [
        {
          id: 'general',
          label: '基础问题',
          faqs: [
            {
              question: '如何注册狂速科技SAAS账号？',
              answer: '访问我们的官方网站，点击右上角的"注册"按钮，填写手机号码或邮箱，设置密码完成注册。注册成功后，系统会自动发送验证邮件或短信，请注意查收并完成验证。',
              isOpen: false
            },
            {
              question: '狂速科技SAAS支持哪些小程序平台？',
              answer: '狂速科技SAAS目前支持微信小程序、支付宝小程序和抖音小程序。您可以根据自己的需求选择相应的平台进行部署，也可以同时部署多个平台，实现多渠道覆盖。',
              isOpen: false
            },
            {
              question: '每个套餐包含哪些功能？',
              answer: '我们提供三种套餐：基础版、专业版和企业版。基础版包含单平台小程序和基础商城功能；专业版增加了多平台支持、高级营销工具和更多存储空间；企业版则提供全平台支持、定制化开发和专属技术支持。详细功能对比请查看我们的<a href="pricing.html" class="text-primary hover:underline">套餐价格</a>页面。',
              isOpen: false
            },
            {
              question: '如何升级或降级我的套餐？',
              answer: '登录您的管理后台，点击"账户中心"，选择"套餐管理"，然后点击"升级/降级"按钮，按照提示选择您需要的套餐并完成支付即可。升级套餐会立即生效，降级套餐将在下一个计费周期生效。',
              isOpen: false
            }
          ]
        },
        {
          id: 'installation',
          label: '安装与配置',
          faqs: [
            {
              question: '如何创建第一个小程序？',
              answer: '登录您的狂速科技SAAS账户后，点击"创建小程序"按钮，选择您需要的小程序类型和模板，按照系统引导完成基本设置、页面设计和内容配置，最后提交审核并发布即可。',
              isOpen: false
            },
            {
              question: '如何绑定我的小程序账号？',
              answer: '在管理后台中，点击"设置"→"小程序设置"，选择您要绑定的平台（微信/支付宝/抖音），然后按照系统提示完成授权绑定。您需要有对应平台的小程序开发者账号才能完成绑定。',
              isOpen: false
            },
            {
              question: '为什么我的小程序审核不通过？',
              answer: '小程序审核不通过通常是因为内容不符合平台规范，如包含敏感信息、虚假宣传、诱导分享等内容。您可以在平台的审核反馈中查看具体原因，修改后重新提交审核。如果多次审核不通过，建议联系我们的技术支持团队获取帮助。',
              isOpen: false
            }
          ]
        },
        {
          id: 'payment',
          label: '支付相关',
          faqs: [
            {
              question: '支持哪些支付方式？',
              answer: '狂速科技SAAS平台支持多种支付方式，包括微信支付、支付宝、银行转账等。在小程序中，您可以根据自己的需求选择合适的支付方式进行配置。',
              isOpen: false
            },
            {
              question: '如何配置支付功能？',
              answer: '在管理后台中，点击"设置"→"支付设置"，选择您要配置的支付方式，然后按照系统提示完成商户号、密钥等信息的填写和验证。不同支付方式的配置步骤可能略有不同，请参考具体的配置指南。',
              isOpen: false
            },
            {
              question: '支付成功但订单未更新怎么办？',
              answer: '// ... 原内容此处被截断 ...',
              isOpen: false
            }
          ]
        }
      ]
    };
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    },
    changeTab(tabId) {
      this.activeTab = tabId;
    },
    toggleFaqAnswer(index) {
      const currentTab = this.faqTabs.find(tab => tab.id === this.activeTab);
      currentTab.faqs[index].isOpen = !currentTab.faqs[index].isOpen;
    }
  },
  mounted() {
    // 可以在这里添加滚动进度条等逻辑
  }
};
</script>

<style scoped>
@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .bg-gradient-blue {
    background: linear-gradient(135deg, #48b6ff, #2e6cf1);
  }
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
  }
  .card-glow {
    box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
  }
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
  }
  .faq-answer.active {
    max-height: 500px;
    opacity: 1;
  }
  .support-tab {
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
  }
  .support-tab.active {
    border-bottom: 2px solid #48b6ff;
    color: #48b6ff;
  }
  .progress-step {
    position: relative;
  }
  .progress-line {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 100%;
    height: 2px;
    background: #333;
    transform: translateY(-50%);
  }
  .progress-line.active {
    background: linear-gradient(90deg, #48b6ff, #2e6cf1);
  }
}
</style>
